<!DOCTYPE html>
<html lang="en">
<head>
    {% load staticfiles %}
    <meta charset="UTF-8">
    <title>自动化测试平台登录</title>
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
</head>
<body>
<div id="box">
    <div id="tittles">自动化测试平台</div>
    <div id="login-all">
        {% block page_tittle %}
            <h4>用户登录</h4>
        {% endblock page_tittle %}
        {#        <form action="{% url 'login' %}" method="post" >#}
        <div class="username">
            <span class="ico"><img src="{% static 'image/login/user_ico.png' %}"></span>
            <input class="in user" type="text" name="username" placeholder="请输入用户名" maxlength="20">
        </div>
        <div class="password">
            <span class="ico"><img src="{% static 'image/login/pwd_ico.png' %}"></span>
            <input class="in" autocomplete="new-password" type="password" name="password" placeholder="请输入密码" maxlength="20">
        </div>

        <div class="sign-up">
            {% block sign_up_a %}
                <span class="warn "></span>
                <a href="{% url 'sign_up' %}">用户注册<img src="{% static 'image/login/sign_up_ico.png' %}"></a>
            {% endblock sign_up_a %}
        </div>

        <div>
            {% block register %}
                <input class="sub" type="submit" value="登录">
            {% endblock register %}
        </div>
        {#        </form>#}
    </div>
</div>

<script src="{% static 'js/jquery-3.4.1.js' %}"></script>
{% block script %}
    <script>
        // 验证登录
        $('.sub').click(function () {
            $.ajax({
                url: '/myTestFront/login/',
                type: 'POST',
                data: {username: $('[name="username"]').val(), password: $('[name="password"]').val()},
                success: function (response) {
                    if (response.includes('success')) {
                        window.location.href = '{% url 'home' %}'
                    } else {
                        $('.warn').css('color', 'red').text(response);
                    }
                }
            })
        });
        // 取消错误提示
        $('.in').focus(function () {
            $('.warn').text('')
        });
    </script>
{% endblock script %}

</body>
</html>
